---
title: Style Props
description:
  Learn how to use style props in Chakra UI. Style props are a way to alter the
  style of a component by simply passing props to it
---

Style props are a way to alter the style of a component by simply passing props
to it. It helps to save time by providing helpful shorthand ways to style
components.

## Reference

The following table shows a list of every style prop and the properties within
each group.

### Margin and padding

```jsx live=false
import { Box } from "@chakra-ui/react"

// m={2} refers to the value of `theme.space[2]`
<Box m={2}>Tomato</Box>

// You can also use custom values
<Box maxW="960px" mx="auto" />

// sets margin `8px` on all viewports and `16px` from the first breakpoint and up
<Box m={[2, 3]} />
```

| Prop                  | CSS Property                                  | Theme Key |
| --------------------- | --------------------------------------------- | --------- |
| `m`, `margin`         | `margin`                                      | `space`   |
| `mt`, `marginTop`     | `margin-top`                                  | `space`   |
| `mr`, `marginRight`   | `margin-right`                                | `space`   |
| `me`, `marginEnd`     | `margin-inline-end`                           | `space`   |
| `mb`, `marginBottom`  | `margin-bottom`                               | `space`   |
| `ml`, `marginLeft`    | `margin-left`                                 | `space`   |
| `ms`, `marginStart`   | `margin-inline-start`                         | `space`   |
| `mx`                  | `margin-inline-start` + `margin-inline-end`   | `space`   |
| `my`                  | `margin-top` + `margin-bottom`                | `space`   |
| `p`, `padding`        | `padding`                                     | `space`   |
| `pt`, `paddingTop`    | `padding-top`                                 | `space`   |
| `pr`, `paddingRight`  | `padding-right`                               | `space`   |
| `pe`, `paddingEnd`    | `padding-inline-end`                          | `space`   |
| `pb`, `paddingBottom` | `padding-bottom`                              | `space`   |
| `pl`, `paddingLeft`   | `padding-left`                                | `space`   |
| `ps`, `paddingStart`  | `padding-inline-start`                        | `space`   |
| `px`                  | `padding-inline-start` + `padding-inline-end` | `space`   |
| `py`                  | `padding-top` + `padding-bottom`              | `space`   |

> For `mx` and `px` props, we use `margin-inline-start` and `margin-inline-end`
> to ensure the generated styles are RTL-friendly

### Color and background color

```jsx live=false
import { Box } from "@chakra-ui/react"

// picks up a nested color value using dot notation
// => `theme.colors.gray[50]`
<Box color='gray.50' />

// raw CSS color value
<Box color='#f00' />

// background colors
<Box bg='tomato' />

// verbose prop
<Box backgroundColor='tomato' />
```

| Prop               | CSS Property       | Theme Key |
| ------------------ | ------------------ | --------- |
| `color`            | `color`            | `colors`  |
| `bg`, `background` | `background`       | `colors`  |
| `bgColor`          | `background-color` | `colors`  |
| `opacity`          | `opacity`          | none      |

### Gradient

```jsx live=false
import { Box, Text } from "@chakra-ui/react"

// adding linear gradient and color transitions
<Box w="100%" h="200px" bgGradient="linear(to-t, green.200, pink.500)" />

// adding radial gradient and color transitions
<Box w="100%" h="200px" bgGradient="radial(gray.300,yellow.400,pink.200)" />

// adding the text gradient
<Text
  bgGradient="linear(to-l, #7928CA,#FF0080)"
  bgClip="text"
  fontSize="6xl"
  fontWeight="extrabold"
>
  Welcome to Chakra UI
</Text>

```

| Prop                       | CSS Property       | Theme Key |
| -------------------------- | ------------------ | --------- |
| `bgGradient`               | `background-image` | none      |
| `bgClip`, `backgroundClip` | `background-clip`  | none      |

### Typography

```jsx live=false
import { Text } from "@chakra-ui/react"

// font-size of `theme.fontSizes.md`
<Text fontSize="md" />

// font-size `32px`
<Text fontSize={32} />

// font-size `'2em'`
<Text fontSize='2em' />

// text-align `left` on all viewports and `center` from the first breakpoint and up
<Text textAlign={[ 'left', 'center' ]} />
```

| Prop             | CSS Property      | Theme Key        |
| ---------------- | ----------------- | ---------------- |
| `fontFamily`     | `font-family`     | `fonts`          |
| `fontSize`       | `font-size`       | `fontSizes`      |
| `fontWeight`     | `font-weight`     | `fontWeights`    |
| `lineHeight`     | `line-height`     | `lineHeights`    |
| `letterSpacing`  | `letter-spacing`  | `letterSpacings` |
| `textAlign`      | `text-align`      | none             |
| `fontStyle`      | `font-style`      | none             |
| `textTransform`  | `text-transform`  | none             |
| `textDecoration` | `text-decoration` | none             |

### Layout, width and height

```jsx live=false
import { Box } from "@chakra-ui/react"

// verbose
<Box width="100%" height={32} />

// shorthand
<Box w="100%" h="32px" />

// use theme sizing
<Box boxSize="sm" />

// width `50%`
<Box w={1/2} />

// width `256px`
<Box w={256} />

// width `'40px'`
<Box w='40px' />

```

| Prop                | CSS Property      | Theme Key |
| ------------------- | ----------------- | --------- |
| `w`, `width`        | `width`           | `sizes`   |
| `h`, `height`       | `height`          | `sizes`   |
| `minW`, `minWidth`  | `min-width`       | `sizes`   |
| `maxW`, `maxWidth`  | `max-width`       | `sizes`   |
| `minH`, `minHeight` | `min-height`      | `sizes`   |
| `maxH`, `maxHeight` | `max-height`      | `sizes`   |
| `d`, `display`      | `display`         | none      |
| `boxSize`           | `width`, `height` | `sizes`   |
| `verticalAlign`     | `vertical-align`  | none      |
| `overflow`          | `overflow`        | none      |
| `overflowX`         | `overflowX`       | none      |
| `overflowY`         | `overflowY`       | none      |

### Flexbox

```jsx live=false
import { Box, Flex } from "@chakra-ui/react"

// verbose
<Box display="flex" alignItems="center" justifyContent="space-between">
  Box with Flex props
</Box>

// shorthand using the `Flex` component
<Flex align="center" justify="center">
  Flex Container
</Flex>
```

> Note: Props in `*` will only work if you use the `Flex` component.

| Prop                                      | CSS Property      | Theme Key |
| ----------------------------------------- | ----------------- | --------- |
| `alignItems`, \*`align`                   | `align-items`     | none      |
| `alignContent`                            | `align-content`   | none      |
| `justifyItems`                            | `justify-items`   | none      |
| `justifyContent`, \*`justify`             | `justify-content` | none      |
| `flexWrap`, \*`wrap`                      | `flex-wrap`       | none      |
| `flexDirection`, `flexDir`, \*`direction` | `flex-direction`  | none      |
| `flex`                                    | `flex`            | none      |
| `flexGrow`                                | `flex-grow`       | none      |
| `flexShrink`                              | `flex-shrink`     | none      |
| `flexBasis`                               | `flex-basis`      | none      |
| `justifySelf`                             | `justify-self`    | none      |
| `alignSelf`                               | `align-self`      | none      |
| `order`                                   | `order`           | none      |

### Grid Layout

```jsx live=false
import { Box, Grid } from "@chakra-ui/react"

// verbose
<Box display="grid" gridGap={2} gridAutoFlow="row dense">
  Grid
</Box>

// shorthand using the `Grid` component
<Grid gap={2} autoFlow="row dense">
  Grid
</Grid>
```

> Note: Props in `*` will only work if you use the `Grid` component.

| Prop                                       | CSS Property            | Theme Key |
| ------------------------------------------ | ----------------------- | --------- |
| `gridGap`, \*`gap`                         | `grid-gap`              | `space`   |
| `gridRowGap`, \*`rowGap`                   | `grid-row-gap`          | `space`   |
| `gridColumnGap`, \*`columnGap`             | `grid-column-gap`       | `space`   |
| `gridColumn`, \*`column`                   | `grid-column`           | none      |
| `gridRow`, \*`row`                         | `grid-row`              | none      |
| `gridArea`, \*`area`                       | `grid-area`             | none      |
| `gridAutoFlow`, \*`autoFlow`               | `grid-auto-flow`        | none      |
| `gridAutoRows`, \*`autoRows`               | `grid-auto-rows`        | none      |
| `gridAutoColumns`, \*`autoColumns`         | `grid-auto-columns`     | none      |
| `gridTemplateRows`, \*`templateRows`       | `grid-template-rows`    | none      |
| `gridTemplateColumns`, \*`templateColumns` | `grid-template-columns` | none      |
| `gridTemplateAreas`, \*`templateAreas`     | `grid-template-areas`   | none      |

### Background

```jsx live=false
import { Box } from "@chakra-ui/react"

// verbose
<Box
  backgroundImage="url('/images/kyuubi.png')"
  backgroundPosition="center"
  backgroundRepeat="no-repeat"
/>

// shorthand
<Box
  bgImage="url('/images/gaara.png')"
  bgPosition="center"
  bgRepeat="no-repeat"
/>
```

| Prop                                  | CSS Property            | Theme Key |
| ------------------------------------- | ----------------------- | --------- |
| `bg`, `background`                    | `background`            | none      |
| `bgImage`, `backgroundImage`          | `background-image`      | none      |
| `bgSize`, `backgroundSize`            | `background-size`       | none      |
| `bgPosition`,`backgroundPosition`     | `background-position`   | none      |
| `bgRepeat`,`backgroundRepeat`         | `background-repeat`     | none      |
| `bgAttachment`,`backgroundAttachment` | `background-attachment` | none      |

### Borders

```jsx live=false
<Box border="1px" borderColor="gray.200">
  Card
</Box>
```

| Prop                | CSS Property                   | Theme Field    |
| ------------------- | ------------------------------ | -------------- |
| `border`            | `border`                       | `borders`      |
| `borderWidth`       | `border-width`                 | `borderWidths` |
| `borderStyle`       | `border-style`                 | `borderStyles` |
| `borderColor`       | `border-color`                 | `colors`       |
| `borderTop`         | `border-top`                   | `borders`      |
| `borderTopWidth`    | `border-top-width`             | `borderWidths` |
| `borderTopStyle`    | `border-top-style`             | `borderStyles` |
| `borderTopColor`    | `border-top-color`             | `colors`       |
| `borderRight`       | `border-right`                 | `borders`      |
| `borderEnd`         | `border-inline-end`            | `borders`      |
| `borderRightWidth`  | `border-right-width`           | `borderWidths` |
| `borderEndWidth`    | `border-inline-end-width`      | `borderWidths` |
| `borderRightStyle`  | `border-right-style`           | `borderStyles` |
| `borderEndStyle`    | `border-inline-end-style`      | `borderStyles` |
| `borderRightColor`  | `border-right-color`           | `colors`       |
| `borderEndColor`    | `border-inline-end-color`      | `colors`       |
| `borderBottom`      | `border-bottom`                | `borders`      |
| `borderBottomWidth` | `border-bottom-width`          | `borderWidths` |
| `borderBottomStyle` | `border-bottom-style`          | `borderStyles` |
| `borderBottomColor` | `border-bottom-color`          | `colors`       |
| `borderLeft`        | `border-left`                  | `borders`      |
| `borderStart`       | `border-inline-start`          | `borders`      |
| `borderLeftWidth`   | `border-left-width`            | `borderWidths` |
| `borderStartWidth`  | `border-inline-start-width`    | `borderWidths` |
| `borderLeftStyle`   | `border-left-style`            | `borderStyles` |
| `borderStartStyle`  | `border-inline-start-style`    | `borderStyles` |
| `borderLeftColor`   | `border-left-color`            | `colors`       |
| `borderStartColor`  | `border-inline-start-color`    | `colors`       |
| `borderX`           | `border-left` , `border-right` | `borders`      |
| `borderY`           | `border-top` , `border-bottom` | `borders`      |

### Border Radius

```jsx live=false
import { Button } from "@chakra-ui/react"

// This button will have no right borderRadius
<Button borderRightRadius="0">Button 1</Button>

// This button will have no left borderRadius*/
<Button borderLeftRadius="0">Button 2</Button>

// top left and top right radius will be `theme.radii.md` => 4px
<Button borderTopRadius="md">Button 2</Button>
```

| Prop                      | CSS Property                                                                 | Theme Field |
| ------------------------- | ---------------------------------------------------------------------------- | ----------- |
| `borderRadius`            | `border-radius`                                                              | `radii`     |
| `borderTopLeftRadius`     | `border-top-left-radius`                                                     | `radii`     |
| `borderTopStartRadius`    | `border-top-left-radius` in LTR,<br/> `border-top-right-radius` in RTL       | `radii`     |
| `borderTopRightRadius`    | `border-top-right-radius`                                                    | `radii`     |
| `borderTopEndRadius`      | `border-top-right-radius` in LTR,<br/> `border-top-left-radius` in RTL       | `radii`     |
| `borderBottomRightRadius` | `border-bottom-right-radius`                                                 | `radii`     |
| `borderBottomEndRadius`   | `border-bottom-right-radius` in LTR,<br/> `border-bottom-left-radius` in RTL | `radii`     |
| `borderBottomLeftRadius`  | `border-bottom-left-radius`                                                  | `radii`     |
| `borderBottomStartRadius` | `border-bottom-left-radius` in LTR,<br/> `border-bottom-left-radius` in RTL  | `radii`     |
| `borderTopRadius`         | `border-top-left-radius` + `border-top-right-radius`                         | `radii`     |
| `borderRightRadius`       | `border-top-right-radius` + `border-bottom-right-radius`                     | `radii`     |
| `borderEndRadius`         | `border-top-right-radius` + `border-bottom-right-radius`                     | `radii`     |
| `borderBottomRadius`      | `border-bottom-left-radius` + `border-bottom-right-radius`                   | `radii`     |
| `borderLeftRadius`        | `border-top-left-radius` + `border-bottom-left-radius`                       | `radii`     |
| `borderStartRadius`       | `border-top-left-radius` + `border-bottom-left-radius`                       | `radii`     |

### Position

```jsx live=false
import { Box } from "@chakra-ui/react"

// verbose
<Box position="absolute">Cover</Box>

// shorthand
<Box pos="absolute">Cover</Box>
<Box pos="absolute" top="0" left="0">
  Absolute with top and left
</Box>
<Box pos="fixed" w="100%" zIndex={2}>
  Fixed with zIndex
</Box>
```

| Prop             | CSS Property | Theme Field |
| ---------------- | ------------ | ----------- |
| `pos`,`position` | `position`   | none        |
| `zIndex`         | `z-index`    | `zIndices`  |
| `top`            | `top`        | `space`     |
| `right`          | `right`      | `space`     |
| `bottom`         | `bottom`     | `space`     |
| `left`           | `left`       | `space`     |

### Shadow

```jsx
<SimpleGrid
  bg="gray.50"
  columns={{ sm: 2, md: 4 }}
  spacing="8"
  p="10"
  textAlign="center"
  rounded="lg"
  color="gray.400"
>
  <Box boxShadow="xs" p="6" rounded="md" bg="white">
    xs
  </Box>
  <Box boxShadow="sm" p="6" rounded="md" bg="white">
    sm
  </Box>
  <Box boxShadow="base" p="6" rounded="md" bg="white">
    Base
  </Box>
  <Box boxShadow="md" p="6" rounded="md" bg="white">
    md
  </Box>
  <Box boxShadow="lg" p="6" rounded="md" bg="white">
    lg
  </Box>
  <Box boxShadow="xl" p="6" rounded="md" bg="white">
    xl
  </Box>
  <Box boxShadow="2xl" p="6" rounded="md" bg="white">
    2xl
  </Box>
  <Box boxShadow="dark-lg" p="6" rounded="md" bg="white">
    Dark lg
  </Box>
  <Box boxShadow="outline" p="6" rounded="md" bg="white">
    Outline
  </Box>
  <Box boxShadow="inner" p="6" rounded="md" bg="white">
    Inner
  </Box>
</SimpleGrid>
```

```jsx
<Text textShadow="1px 1px #ff0000" m="6">
  Text with shadows
</Text>
```

| Prop         | CSS Property  | Theme Field |
| ------------ | ------------- | ----------- |
| `textShadow` | `text-shadow` | `shadows`   |
| `boxShadow`  | `box-shadow`  | `shadows`   |

### Pseudo

```jsx live=false
import { Button } from "@chakra-ui/react"

// :hover style
<Button
  colorScheme="teal"
  _hover={{
    background: "white",
    color: "teal.500",
  }}
>
  Hover me
</Button>

// apply :hover over parent element
<Box
  role="group"
>
  <Box
    _hover={{ fontWeight: 'semibold' }}
    _groupHover={{ color: 'tomato' }}
  >
  </Box>
</Box>
```

| Prop             | CSS Property                                                             | Theme Field |
| ---------------- | ------------------------------------------------------------------------ | ----------- |
| `_hover`         | `:hover`,<br/>`[data-hover]`                                             | none        |
| `_active`        | `:active`,<br/>`[data-active]`                                           | none        |
| `_focus`         | `:focus`,<br/>`[data-focus]`                                             | none        |
| `_highlighted`   | `[data-highlighted]`                                                     | none        |
| `_focusWithin`   | `:focus-within`                                                          | none        |
| `_focusVisible`  | `:focus-visible`                                                         | none        |
| `_disabled`      | `[disabled]`,<br/>`[aria-disabled=true]`,<br/>`[data-disabled]`          | none        |
| `_readOnly`      | `[aria-readonly=true]`,<br/>`[readonly]`, <br/>`[data-readonly]`         | none        |
| `_before`        | `::before`                                                               | none        |
| `_after`         | `::after`                                                                | none        |
| `_empty`         | `:empty`                                                                 | none        |
| `_expanded`      | `[aria-expanded=true]`,<br/>`[data-expanded]`                            | none        |
| `_checked`       | `[aria-checked=true]`,<br/>`[data-checked]`                              | none        |
| `_grabbed`       | `[aria-grabbed=true]`,<br/>`[data-grabbed]`                              | none        |
| `_pressed`       | `[aria-pressed=true]`,<br/>`[data-pressed]`                              | none        |
| `_invalid`       | `[aria-invalid=true]`,<br/>`[data-invalid]`                              | none        |
| `_valid`         | `[data-valid]`,<br/>`[data-state=valid]`                                 | none        |
| `_loading`       | `[data-loading]`,<br/>`[aria-busy=true]`                                 | none        |
| `_selected`      | `[aria-selected=true]`,<br/>`[data-selected]`                            | none        |
| `_hidden`        | `[hidden]`,<br/>`[data-hidden]`                                          | none        |
| `_autofill`      | `:-webkit-autofill`                                                      | none        |
| `_even`          | `:nth-of-type(even)`                                                     | none        |
| `_odd`           | `:nth-of-type(odd)`                                                      | none        |
| `_first`         | `:first-of-type`                                                         | none        |
| `_last`          | `:last-of-type`                                                          | none        |
| `_notFirst`      | `:not(:first-of-type)`                                                   | none        |
| `_notLast`       | `:not(:last-of-type)`                                                    | none        |
| `_visited`       | `:visited`                                                               | none        |
| `_activeLink`    | `[aria-current=page]`                                                    | none        |
| `_indeterminate` | `:indeterminate`,<br/>`[aria-checked=mixed]`,<br/>`[data-indeterminate]` | none        |
| `_groupHover`    | `[role=group]:hover &`, <br/> `[role=group][data-hover] &`               | none        |
| `_groupFocus`    | `[role=group]:focus &`, <br/> `[role=group][data-focus] &`               | none        |
| `_groupActive`   | `[role=group]:active &`, <br/> `[role=group][data-active] &`             | none        |
| `_groupDisabled` | `[role=group]:disabled &`, <br/> `[role=group][data-disabled] &`         | none        |
| `_groupInvalid`  | `[role=group][data-invalid] &`                                           | none        |
| `_groupChecked`  | `[role=group][data-checked] &`                                           | none        |
| `_placeholder`   | `::placeholder`                                                          | none        |
| `_fullScreen`    | `:fullscreen`                                                            | none        |
| `_selection`     | `::selection`                                                            | none        |

### Other Props

Asides all the common style props listed above, all component will accept the
following props:

| Prop              | CSS Property       | Theme Field |
| ----------------- | ------------------ | ----------- |
| `animation`       | `animation`        | none        |
| `appearance`      | `appearance`       | none        |
| `transform`       | `transform`        | none        |
| `transformOrigin` | `transform-origin` | none        |
| `visibility`      | `visibility`       | none        |
| `whiteSpace`      | `white-space`      | none        |
| `userSelect`      | `user-select`      | none        |
| `pointerEvents`   | `pointer-events`   | none        |
| `wordBreak`       | `word-break`       | none        |
| `overflowWrap`    | `overflow-wrap`    | none        |
| `textOverflow`    | `text-overflow`    | none        |
| `boxSizing`       | `box-sizing`       | none        |
| `cursor`          | `cursor`           | none        |
| `resize`          | `resize`           | none        |
| `transition`      | `transition`       | none        |
| `objectFit`       | `object-fit`       | none        |
| `objectPosition`  | `object-position`  | none        |
| `objectPosition`  | `object-position`  | none        |
| `float`           | `float`            | none        |
| `fill`            | `fill`             | `colors`    |
| `stroke`          | `stroke`           | `colors`    |
| `outline`         | `outline`          | none        |

## The `as` prop

The `as` prop is a feature that all of our components that allows you to pass an
HTML tag or component to be rendered.

For example, say you are using a `Button` component, and you need to make it a
link instead. You can compose `a` and `Button` like this:

```jsx
<Button as="a" target="_blank" variant="outline" href="https://chakra-ui.com">
  Hello
</Button>
```

This allows you to use all of the `Button` props and all of the `a` props
without having to wrap the Button in an `a` component.
